<template>
    <a-modal v-bind:open="visible" @ok="handleLoginOrRegister" @cancel="handleCancel" :confirm-loading="confirmLoading">
        <a-radio-group v-model:value="mode" style="margin-left: 180px;" @change="handleModeChange">
            <a-radio-button value="login">登录</a-radio-button>
            <a-radio-button value="register">注册</a-radio-button>
        </a-radio-group>
        <br />
        <br/>
        <a-form
            :model="formState"
            :rules="rules"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 14 }"
            autocomplete="off"
            @finish="handleLoginOrRegister"
        >
            <a-form-item
                label="昵称"
                name="username"
                v-if="mode === 'register'"
            >
                <a-input v-model:value="formState.username" show-count :maxlength="50"/>
            </a-form-item>

            <a-form-item
                label="手机号"
                name="phone"
            >
                <a-input v-model:value="formState.phone" show-count :maxlength="11"/>
            </a-form-item>

            <a-form-item
                label="密码"
                name="password"
            >
                <a-input-password v-model:value="formState.password" show-count :maxlength="50"/>
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 14, offset: 10 }">
                <a-button v-if="mode === 'login'" type="primary" html-type="submit">登录</a-button>
                <a-button v-if="mode === 'register'" html-type="submit">注册</a-button>
            </a-form-item>
        </a-form>
        <template #footer>
        </template>
    </a-modal>
</template>
  
<script lang="ts">
    export default {
        name: 'LogIn',
        props: {
            visible: {
                type: Boolean,
                default: false,
            },
        },
    };
</script>

<script lang="ts" setup>
    import { ref, reactive, toRaw } from 'vue';
    import {login, register} from '../../api/user_api'
    import { message } from 'ant-design-vue';
    import type { Rule } from 'ant-design-vue/es/form';

    const emit = defineEmits(['loginSuccess', 'loginCancel'])
    const confirmLoading = ref<Boolean>(false) // 按钮是否loading
    const mode = ref<string>("login") // login为登录模式，register为注册模式
    interface FormState { // 表格类定义
        username: string;
        password: string;
        phone: string;
    }
    const formState = reactive<FormState>({// 表格对象
        username: '',
        password: '',
        phone: '',
    });
    const rules: Record<string, Rule[]> = { // 表格校验规则
        username: [{ required: true, message: '请输入昵称，长度不超过50', trigger: 'blur' }],
        phone: [{required: true, type: 'string', pattern: /^\d{11}$/, message:'请输入11位手机号', trigger: 'blur'}],
        password: [{type: 'string', required: true, pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/, message: '密码必须包含大小写字母和数字，且至少8位长度', trigger: 'blur'}]
    };

    const handleModeChange = () => {
        console.log(mode.value)
    }

    const handleLoginOrRegister = async(value:any) => {
        confirmLoading.value = true
        if (mode.value === "login") {
            await login(formState)
            .then(
                function (response) {
                    console.log(response.data)
                    localStorage.setItem('authorization', String(response.data.session))
                    emit('loginSuccess', response.data)
                }
            )
            .catch(
                function (response) {
                    message.error(response.message)
                }
            )
        } else {
            await register(formState)
            .then(
                function (response) {
                    console.log(response.data)
                    localStorage.setItem('authorization', String(response.data.session))
                    emit('loginSuccess', response.data)
                }
            )
            .catch(
                function(response) {
                    message.error(response.message)
                }
            )
        }
    }

    const handleCancel = () => {
        confirmLoading.value = false
        emit('loginCancel', {})
    }
</script>

<style scoped>

</style>